import './App.less'
import TodoInput from "./components/TodoInput.tsx";
import TodoList from "./components/TodoList.tsx";
import {useState} from "react";
import {ITodoItem} from "./interface";

function App() {

    // 数据
    const [list, setList] = useState<ITodoItem[]>([])
    // 索引
    const [index, setIndex] = useState(1)

    // 添加todo
    function addTodo(text: string) {
        const newItem = {id: index, text: text, completed: false}
        setIndex(index + 1)
        setList([...list, newItem])
    }

    // 删除todo
    function delTodo(id: number) {
        setList(list.filter(item => item.id !== id))
    }

    // 切换完成状态
    function changeCompleted(id: number) {
        setList(list.map(item => {
            if (item.id === id) {
                item.completed = !item.completed;
            }
            return item
        }))
    }

    return (
        <>
            <h1>Todo 待办事项</h1>
            <div>
                <TodoInput addTodo={addTodo}/>
                <TodoList list={list} delTodo={delTodo} changeCompleted={changeCompleted}/>
            </div>
        </>
    )
}

export default App
